<!--/**
*侧边栏组件*
*
* @author LWG
* @date 2022/8/10 13:45
* @since 1.0.0
*/-->
<template>
  <el-menu :default-active="$route.path" class="el-menu-vertical-demo" background-color="#001e34" text-color="#fff"
    active-text-color="#ffd04b" router :collapse="isCollapse">
    <h1 style="margin-top: -40px">
      <div>
        <img src="../assets/logo.png" style="height: 150px ;position: relative;top: 6px;margin-top: 0px">
      </div>
      <div style="margin-top: -40px;font-size: 20px;">
        <b style="color: #00DD77;font-size: 25px">时光源 </b>
        <b style="color: #00DD77">Timeyan</b>
      </div>
    </h1>

    <!-- 使用 Element 2.8.2 版本所提供的图标-->

    <!-- <div style="font-size: 30px"> -->
    <el-menu-item index="/home">
      <template slot="title">
        <i class="el-icon-s-home"></i>
        <span slot="title"> 主页</span>
      </template>
    </el-menu-item>

    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-s-custom" style="font-weight: bold; font-size: 30px"></i>
        <span slot="title" style="font-size: 20px"> 用户管理</span>
      </template>
      <el-menu-item index="/home/user">
        <template slot="title">
          <i class="el-icon-user-solid"></i>
          <span slot="title"> 用户列表</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/home/userLoginLog">
        <template slot="title">
          <i class="el-icon-user"></i>
          <span slot="title"> 用户日志</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/home/announcement">
        <template slot="title">
          <i class="el-icon-s-comment"></i>
          <span slot="title"> 公告通知</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/home/userFeedback">
        <template slot="title">
          <i class="el-icon-s-finance"></i>
          <span slot="title"> 用户反馈</span>
        </template>
      </el-menu-item>
    </el-submenu>

    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-video-camera"></i>
        <span slot="title"> 广告与服务</span>
      </template>
      <el-menu-item index="/home/advertising">
        <template slot="title">
          <i class="el-icon-office-building"></i>
          <span slot="title"> 发布广告</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/home/image">
        <template slot="title">
          <i class="el-icon-s-flag"></i>
          <span slot="title"> 素材管理</span>
        </template>
      </el-menu-item>
    </el-submenu>

    <el-menu-item index="/home/shopManagement">
      <template slot="title">
        <i class="el-icon-s-shop"></i>
        <span slot="title"> 商品管理</span>
      </template>
    </el-menu-item>

    <el-submenu index="4">
      <template slot="title">
        <i class="el-icon-s-platform"></i>
        <span slot="title"> 平台管理</span>
      </template>
      <el-menu-item index="/home/share">
        <template slot="title">
          <i class="el-icon-camera-solid"></i>
          <span slot="title"> 分享平台管理</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/home/help">
        <template slot="title">
          <i class="el-icon-s-promotion"></i>
          <span slot="title"> 求助平台管理</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/home/comment">
        <i class="el-icon-s-comment"></i>
        <span slot="title">评论管理</span>
      </el-menu-item>
    </el-submenu>

    <el-submenu index="5">
      <template slot="title">
        <i class="el-icon-s-marketing"></i>
        <span slot="title"> 数据</span>
      </template>
      <el-menu-item index="/home/userDistribution">
        <template slot="title">
          <i class="el-icon-office-building"></i>
          <span slot="title"> 用户分布</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/home/newUsers">
        <template slot="title">
          <i class="el-icon-s-flag"></i>
          <span slot="title"> 新增用户</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/home/activityOfRegion">
        <template slot="title">
          <i class="el-icon-finished"></i>
          <span slot="title"> 区域活跃度</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/home/numberOAUsers">
        <template slot="title">
          <i class="el-icon-s-data"></i>
          <span slot="title"> 活跃用户人数</span>
        </template>
      </el-menu-item>
    </el-submenu>
    <!-- </div> -->
  </el-menu>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Navigation',
  data() {
    return {}
  },
  computed: {
    ...mapState(['isCollapse'])
  }
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 260px;
  min-height: 400px;
}

.el-menu {
  height: 100%;
  width: 0;
}

.logo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0;
  background-color: #001e34;
  height: 100px;
  color: #fff;

  img {
    width: 50px;
    height: 50px;
  }
}

.el-menu-item {
  font-size: 18px;
}
</style>
